<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Agora Web Sample</title>
<link rel="stylesheet" href="vendor/bootstrap.min.css">
<script src="/static/js/app/workspace/conversation/AgoraRTCSDK-2.3.1.js"></script>
<script src="vendor/jquery.js"></script>
</head>

<body>
<div id="div_device" class="panel panel-default">
<div class="select">
<label for="audioSource">音频源: </label><select id="audioSource"></select>
</div>
<div class="select">
<label for="videoSource">视频源: </label><select id="videoSource"></select>
</div>
</div>

<div id="div_join" class="panel panel-default">
<div class="panel-body">
Key: <input id="key" type="text" value="d8d208d16c78459bb8b91a6c3e7c33e6" size="36"></input>
Channel: <input id="channel" type="text" value="1000" size="4"></input>
Host: <input id="video" type="checkbox" checked></input>
<button id="join" class="btn btn-primary" onclick="join()">Join</button>
<button id="leave" class="btn btn-primary" onclick="leave()">Leave</button>
<button id="publish" class="btn btn-primary" onclick="publish()">Publish</button>
<button id="unpublish" class="btn btn-primary" onclick="unpublish()">Unpublish</button>
</div>
</div>

    <!--style>
    .video__box{width:910px; margin:0 auto; overflow:hidden;}
    .video__main{ width:810px; height:607px;float:left }
    .video__list{ width:200px; height:607px; float:left;}
    .video__item{ width:200px; height:174px; hei background:url(/img/icon_live.png) center center no-repeat; }
    </style>
    <div class="video__main">
    </div>
    <div class="video__list">
        <div class="video__item"></div>
        <div id="video" class="video__item">
            <div id="agora_local"></div>
        </div>
    </div-->

<div id="video1" style="margin:0 auto;">
    <div id="agora_local" style="float:right;width:210px;height:147px;display:inline-block;"></div>
</div>

<script language="javascript">
    /*
    * renewChannelKey(channelKey, onSuccess, onFailure)   更新 Channel Key (renewChannelKey)
    * */
if(AgoraRTC.checkSystemRequirements()) {
  alert("Web SDK 与当前使用的浏览器适配");
}else{
    alert("Web SDK 与当前使用的浏览器不适配");
}

/* select Log type (选择日志类型)*/
// AgoraRTC.Logger.setLogLevel(AgoraRTC.Logger.NONE);
// AgoraRTC.Logger.setLogLevel(AgoraRTC.Logger.ERROR);
// AgoraRTC.Logger.setLogLevel(AgoraRTC.Logger.WARNING);
// AgoraRTC.Logger.setLogLevel(AgoraRTC.Logger.INFO);  
// AgoraRTC.Logger.setLogLevel(AgoraRTC.Logger.DEBUG);

/* simulated data to proof setLogLevel() */
// AgoraRTC.Logger.error('this is error');  ///此处报错，不知为何
AgoraRTC.Logger.warning('this is warning');
AgoraRTC.Logger.info('this is info');
AgoraRTC.Logger.debug('this is debug');

var client, localStream, camera, microphone;
//得到音视频源的标签
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');
//进入频道
function join() {
    //进入频道后，不可再进入和选择host
  document.getElementById("join").disabled = true;
  document.getElementById("video").disabled = true;
//带有供应商密钥的Init AgoraRTC客户端
  var channel_key = 'd8d208d16c78459bb8b91a6c3e7c33e6';
  //创建音视频对象(设置通信模式)
  //client = AgoraRTC.createClient({mode: 'interop'});
  //  client = AgoraRTC.createClient({mode: 'web-only'});
    client = AgoraRTC.createClient({mode: 'h264_interop'});
  //初始化客户端对象
  client.init(key.value, function () {
      //加入 AgoraRTC 频道 (join)(密钥，通话频道的字符串，指定用户的 ID，如果设置为null 服务器会自动分配一个，并在 onSuccess 回调方法中返回)
      //client.join(channelKey, channel, uid, function(uid) {},function(uid) {});
      client.join(channel_key, "1024", null, function(uid) {
      alert("用户 " + uid + " 加入频道成功");
      //创建本地流
      if (document.getElementById("video").checked) {//host被选中
          //获取音视频源
        //将音视频的值赋值给相机和麦克风
        camera = videoSource.value;
        microphone = audioSource.value;
        // 创建本地流
          /*
          * var stream = AgoraRTC.createStream({streamID: uid,audio:true,video:true,screen:false});//开启视频通话
          * var stream = AgoraRTC.createStream({streamID: uid,audio:false,video:false,screen:true,extensionId:"minllpmhdgpndnkomcoccfekfegnlikg"});//Chrome 浏览器开始屏幕共享
          * localStream = AgoraRTC.createStream({streamID: uid,audio: false,video: false,screen: true,mediaSource: 'screen',});//Firefox 浏览器开启屏幕共享
          * */
          //开启视频通话
       localStream = AgoraRTC.createStream({streamID: uid, audio: true, cameraId: camera, microphoneId: microphone, video: document.getElementById("video").checked, screen: false});
        //localStream = AgoraRTC.createStream({streamID: uid, audio: false, cameraId: camera, microphoneId: microphone, video: false, screen: true, extensionId: 'minllpmhdgpndnkomcoccfekfegnlikg'});
        if (document.getElementById("video").checked) {
            //设置本地流视频属性
          localStream.setVideoProfile('720p_3');
        }

        // The user has granted access to the camera and mic.
        localStream.on("accessAllowed", function() {
          alert("已获取本地摄像头／麦克风使用权限。");
        });

        // The user has denied access to the camera and mic.
        localStream.on("accessDenied", function() {
          alert("拒绝访问");
        });

        localStream.init(function() {
          alert("成功获取媒体");
          localStream.play('agora_local');

          client.publish(localStream, function (err) {
            alert("发布本地流错误: " + err);
          });

          client.on('stream-published', function (evt) {
            alert("成功发布本地流");
          });
        }, function (err) {
          alert("获取媒体失败", err);
        });
      }
    }, function(err) {
      alert("进入频道失败", err);
    });
  }, function (err) {
    alert("AgoraRTC client 初始化失败", err);
  });

  channelKey = "";

  client.on('error', function(err) {
    alert("Got error msg:", err.reason);
    if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {
      client.renewChannelKey(channelKey, function(){
        alert("成功更新信道密钥");
      }, function(err){
        alert("更新通道密钥失败: ", err);
      });
    }
  });
//远程音视频流已添加回调事件
  client.on('stream-added', function (evt) {
    var stream = evt.stream;
    alert("新增流: " + stream.getId());
    alert("订阅 ", stream);
    client.subscribe(stream, function (err) {
      alert("订阅流失败", err);
    });
  });
//远程音视频流已订阅回调事件
  client.on('stream-subscribed', function (evt) {
    var stream = evt.stream;
    alert("成功订阅远程流: " + stream.getId());
    if ($('div#video #agora_remote'+stream.getId()).length === 0) {
      $('div#video').append('<div id="agora_remote'+stream.getId()+'" style="float:left; width:810px;height:607px;display:inline-block;"></div>');
    }
    //播放音视频流
    stream.play('agora_remote' + stream.getId());
  });
//远程音视频流已删除回调事件
  client.on('stream-removed', function (evt) {
    var stream = evt.stream;
    stream.stop();
    $('#agora_remote' + stream.getId()).remove();
    alert("移除远程流 " + stream.getId());
  });
//对方用户已离开会议室回调事件 (peer-leave)
  client.on('peer-leave', function (evt) {
    var stream = evt.stream;
    if (stream) {
      stream.stop();
      $('#agora_remote' + stream.getId()).remove();
      alert(evt.uid + " 离开频道");
    }
  });
}
//离开 AgoraRTC 频道 (leave)
function leave() {
  document.getElementById("leave").disabled = true;
  client.leave(function () {
    alert("离开频道成功");
  }, function (err) {
    alert("离开频道失败");
  });
}
//发布本地音视频流
function publish() {
  document.getElementById("publish").disabled = true;
  document.getElementById("unpublish").disabled = false;
  client.publish(localStream, function (err) {
    alert("发布本地流错误: " + err);
  });
}
    //取消发布本地音视频流
function unpublish() {
  document.getElementById("publish").disabled = false;
  document.getElementById("unpublish").disabled = true;
  client.unpublish(localStream, function (err) {
    alert("未发布本地流失败" + err);
  });
}

function getDevices() {
    //枚举系统设备
  AgoraRTC.getDevices(function (devices) {
    for (var i = 0; i !== devices.length; ++i) {
      var device = devices[i];
      var option = document.createElement('option');
      option.value = device.deviceId;
      if (device.kind === 'audioinput') {//音频输入
        option.text = device.label || 'microphone ' + (audioSelect.length + 1);
        audioSelect.appendChild(option);
      } else if (device.kind === 'videoinput') {//视频输入
        option.text = device.label || 'camera ' + (videoSelect.length + 1);
        videoSelect.appendChild(option);
      } else {
        alert('其他种类的源/器件: ', device);
      }
    }
  });
}

//audioSelect.onchange = getDevices;
//videoSelect.onchange = getDevices;
getDevices();
</script>
</body>
</html>
